<template>
  <div class="payValidate page-main">
    <div class="filter">
      <PayValidateFilter @filterTable="refreshTable" />
    </div>
    <div class="main">
      <el-descriptions :column="3" border>
        <el-descriptions-item :span="1" :labelStyle="labelStyle" :contentStyle="contentStyle">
          <template slot="label">总订单数</template>
          {{ orderInfo.total }} (单)
        </el-descriptions-item>
        <el-descriptions-item :span="1" :labelStyle="labelStyle" :contentStyle="contentStyle">
          <template slot="label">总金额</template>
          {{ orderInfo.money }} (元)
        </el-descriptions-item>
        <el-descriptions-item :span="1" :labelStyle="labelStyle" :contentStyle="contentStyle">
          <template slot="label">总重量</template>
          {{ orderInfo.weight }} (吨)
        </el-descriptions-item>
      </el-descriptions>
      <el-table v-loading="tableLoading" ref="multipleTable" :data="tableData" height="530" tooltip-effect="dark"
        style="width: 100%" @selection-change="handleSelectionChange" border>
        <el-table-column align="center" width="80">
                <template slot-scope="scope">
                    <!-- <svg v-if="false"
                        style="width: 3em;height:1rem;vertical-align: -0.15em;fill: currentColor;overflow: hidden;"
                        aria-hidden="true">
                        <use xlink:href="#icon-prePayIcon" />
                    </svg > -->
                    <StatusTag :status="scope.row.advance_payment_status" :yund_id="scope.row.yund_id" />
                </template>
            </el-table-column>
        <el-table-column type="selection" width="55" align="center"></el-table-column>
        <el-table-column prop="area_company" label="所属地区" width="110" align="center" :show-overflow-tooltip="true">
        </el-table-column>
        <el-table-column prop="add_id" label="运单ID" width="120" align="center">
          <template slot-scope="scope">{{ scope.row.add_id + '-' + scope.row.yund_id }}</template>
        </el-table-column>
        <el-table-column prop="company_name" label="公司名称" width="120" align="center" :show-overflow-tooltip="true">
        </el-table-column>
        <el-table-column prop="sjxm" label="司机姓名" align="center">
          <template slot-scope="scope">
              {{ $maskString(scope.row.sjxm) }}
          </template> 
        </el-table-column>
        <el-table-column prop="cph" label="车牌号" align="center"  width="100"></el-table-column>
        <el-table-column prop="paytime" label="支付时间" width="100" align="center"
          :show-overflow-tooltip="true"></el-table-column>
        <el-table-column prop="zyf" label="金额" align="center"></el-table-column>
        <el-table-column prop="first_payment" label="首次支付金额" align="center" width="110">
          <template slot-scope="scope">{{ scope.row.first_payment == '0' ? '--' : scope.row.first_payment }}</template>

        </el-table-column>
        <el-table-column prop="name" label="开户行" align="center"  :show-overflow-tooltip="true"></el-table-column>
        <el-table-column prop="yinhang" label="银行卡号" align="center" width="220" :show-overflow-tooltip="true">
          <template slot-scope="scope">
              {{ scope.row.yinhangView ?  scope.row.yinhang : $maskString(scope.row.yinhang) }}
              <el-image 
              style="margin-left:5px; padding-top:5px; width: 20px; height: 20px;cursor: pointer;" 
              :src="scope.row.yinhangView ?  require('@/assets/images/hide.png') : require('@/assets/images/view.png')" 
              @click="()=>{scope.row.yinhangView = !scope.row.yinhangView}"
              :fit="'contain'"></el-image>
          </template> 
        </el-table-column>
        <el-table-column prop="true_name" label="收款人" align="center"></el-table-column>
        <el-table-column prop="xiugai" label="审核状态" align="center">
          <template slot-scope="scope">
            <span v-if="scope.row.xiugai == 1" style="color: green">已审核</span>
            <span v-if="scope.row.xiugai == 0" style="color: red">未审核</span>
          </template>
        </el-table-column>
        <el-table-column prop="status" label="支付状态" align="center">
          <template slot-scope="scope">
            <span v-if="scope.row.status == 1" style="color: green">已支付</span>
            <span v-if="scope.row.status == 0" style="color: red">未支付</span>
            <span v-if="scope.row.status == 2" style="color: red">二次支付中</span>
          </template>
        </el-table-column>
        <el-table-column prop="zffs" label="支付结果" align="center" width="100">
          <template slot-scope="scope">
            <span v-if="scope.row.zffs == 0" style="color: red">未支付</span>
            <span v-if="scope.row.zffs == 1" style="color: black">支付待认证</span>
            <span v-if="scope.row.zffs == 111" style="color: green">支付成功</span>
            <span v-if="scope.row.zffs == 11" style="color: blue">失败</span>
          </template>
        </el-table-column>
        <el-table-column label="操作" align="center">
          <template slot-scope="scope">
            <el-button v-if="scope.row.zffs == 11" size="mini" type="primary"
            style="margin-bottom:5px;margin-left:0"
              @click="handleTwoPay(scope.$index, scope.row)">再次支付</el-button>
            <el-button v-if="scope.row.is_first_payment == 1" size="mini" type="primary"
            style="margin-bottom:5px;margin-left:0"
              @click="checkDetail(scope.row)">详情</el-button>
          </template>
        </el-table-column>
      </el-table>
      <div class="block">
        <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page="currentPage"
          :page-sizes="$pageSizeList" :page-size="pageSize" layout="total, sizes, prev, pager, next, jumper"
          :total="total"></el-pagination>
      </div>

    </div>


    <el-dialog top="5vh" class="dialog" title="查看财务审核信息" :close-on-click-modal="false" :visible.sync="dialogVisible"
      width="80%">
      <processAndpay v-if="dialogVisible" :billDetail="billDetail" @closeDialog="closeDialog" />
    </el-dialog>
    <el-dialog top="20vh" class="dialog" title="二次支付详情" :close-on-click-modal="false" :visible.sync="dialogVisible2"
      width="50%">
      <twicePayDetail v-if="dialogVisible2" :detailList="detailList"/>
    </el-dialog>
  </div>
</template>

<script>
import PayValidateFilter from "./components/payValidateFilter";
import processAndpay from "../components/processAndpay";
import twicePayDetail from "./components/twicePayDetail";
import { payResultList, paymentBillDetail } from "@/api/businessUser/moneyManagment";
export default {
  name: "vaildate",
  components: {
    PayValidateFilter,
    processAndpay,
    twicePayDetail
  },
  data() {
    return {
      currentPage: 1,
      pageSizeList: [10, 20, 30, 40],
      total: 0,
      pageSize: 10,
      tableLoading: true,
      labelStyle: { "text-align": "center", "font-weight": "bold" },
      contentStyle: {
        color: "#444",
        "font-weight": "bold",
        "min-width": "200px"
      },
      orderInfo: {}, //运单总信息
      bankInfo: {}, //银行信息
      tableData: [],
      filterData: {}, //筛选数据
      multipleSelection: [],

      dialogVisible: false,
      dialogVisible2:false,
      detailList:[],
      billDetail: {},
    };
  },
  mounted() {
    // this.refreshTable({
    //   area_status: 0
    // });
  },
  methods: {
    async refreshTable(filterData) {
      this.tableLoading = true;
      if (filterData) {
        //存在筛选数据
        this.filterData = filterData || {};
        this.currentPage = 1;
      } else if (filterData === false) {
        //重置数据
        this.filterData = {
          area_status: 0,
          is_first:-1,//支付方式
        };
        this.currentPage = 1;
      }
      // console.log("过滤数据", this.filterData);
      let result = await payResultList({
        ...this.filterData,
        pageSize: this.pageSize,
        page: this.currentPage
      });
      this.tableLoading = false;

      if (result.code == 200) {
        // this.tableData = result.data.list;
        this.tableData = result.data.list.map(item => {
          item.yinhangView = false;
          return item;
        });
        this.total = result.data.count;
        this.orderInfo.total = result.data.count;
        this.orderInfo.money = result.data.money;
        this.orderInfo.weight = result.data.weight;
      }
    },
    toggleSelection(rows) {
      if (rows) {
        rows.forEach(row => {
          this.$refs.multipleTable.toggleRowSelection(row);
        });
      } else {
        this.$refs.multipleTable.clearSelection();
      }
    },
    handleSelectionChange(val) {
      this.multipleSelection = val;
    },
    handleSizeChange(val) {
      this.pageSize = val;
      this.currentPage = 1;
      this.refreshTable();
    },
    handleCurrentChange(val) {
      this.currentPage = val;
      this.refreshTable();
    },
    //再次支付
    handleTwoPay(index, row) {
      // console.log(index, row);
      const loading = this.$loading({
        lock: true,
        text: "获取支付信息中...",
        spinner: "el-icon-loading",
        background: "rgba(0, 0, 0, 0.5)",
        customClass: "loadingCss"
      });
      this.showPaymentBillDetail(row);
      loading.close();
    },
    checkDetail(row){
      this.detailList = row.pay_secondary
      this.dialogVisible2 = true;
    },

    async showPaymentBillDetail(item) {
      this.billId = item.id;
      let result = await paymentBillDetail({
        id: item.id
      });
      if (result.code == 200) {
        this.billDetail = result.data;
        this.billDetail.status = 0;
        this.dialogVisible = true;
      }
    },
    //关闭支付详情弹框
    closeDialog() {
      this.dialogVisible = false;
    },
  }
};
</script>

<style lang="scss">
.payValidate {
  padding: 10px;
  background: #fff;

  .header {
    color: $theme-Danger;
    font-weight: bold;
    margin-bottom: 10px;

    .t1 {
      margin-right: 20px;
    }
  }

  .main {
    .block {
      margin-top: 20px;
      display: flex;
      justify-content: center;
    }
  }
}
</style>
